<template>
	<div class="background-image">
		<el-container>
			<el-aside style="height: 600px; width: 200px;">
				<el-row>
					<el-col>
						<div>
							<img style="height:80px; width:80px; margin-left:90px;margin-top: 40px; border-radius: 50%;"
								:src="user_tx" /><br />
							<p style="margin-left: 110px;color: gray;font-size: 20px;"><span>{{user_name}}</span></p>
						</div>
						<!-- 调整 el-menu 的样式 -->
						<el-menu style="height: calc(100% - 100px); width: calc(100% - 50px); margin-left: 50px;"
							active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
							default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
							<el-menu-item index="1">
								<el-icon><icon-menu /></el-icon>
								<a href="/pagesIndex/Grzx/Myzl">个人资料</a>
							</el-menu-item>
							<el-menu-item index="2">
								<el-icon><icon-menu /></el-icon>
								<a href="/pagesIndex/Grzx/Ltzx">论坛中心</a>
							</el-menu-item>
							<el-menu-item index="3">
								<el-icon><icon-menu /></el-icon>
								<a href="/pagesIndex/Grzx/News/">消息</a>
							</el-menu-item>
							<el-menu-item index="4">
								<el-icon><icon-menu /></el-icon>
								<a href="/pagesIndex/Grzx/">充值</a>
							</el-menu-item>
						</el-menu>
					</el-col>
				</el-row>
			</el-aside>

			<el-main style="height: 600px;">
				<!-- 路由显示区 -->
				<router-view></router-view>
			</el-main>


		</el-container>
	</div>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	//默认用户名
	const user_name = ref('admin');
	//默认头像
	const user_tx = ref('../../../assets/logo.png');
	const me = JSON.parse(localStorage.getItem("user"));
	console.log(me);
	user_name.value = me.user_name;
	user_tx.value = '/api/src/images/' + me.user_tx;
	// 菜单栏
	const handleOpen = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
	const handleClose = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
	onMounted(() => {
		const jsonUser = localStorage.getItem("user");
		const user = JSON.parse(jsonUser);
		if (user != null && user != '') {
			user_name.value = user.user_name;
			user_tx.value = '/api/src/images/' + user.user_tx;
		}
	});
</script>

<style scoped>
	a {
		text-decoration: none;
		color: white;
	}

	a:hover {
		color: red;
	}

	.background-image {
		margin-top: 50px;
		width: 100vw;
		/* 视口宽度 */
		height: 100vh;
		/* 视口高度 */
		position: fixed;
		/* 固定定位 */
		top: 0;
		left: 0;
		z-index: -1;
		/* 如果有其他内容，确保背景图在它们下面 */
		background-image: url('../../../assets/beijin.jpeg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>